.file-request-upload-page {
    height: 100%;

    --text-font-family: "Inter";
    --text-font-family-heading: "Poppins";

    --color-surface-1: rgba(250, 250, 251, 1);
    --color-surface-2: rgba(243, 244, 244, 1);
    --color-page-background: rgba(255, 255, 255, 1);
    --color-text-primary: rgba(48, 50, 51, 1);
    --color-link-primary: rgba(44, 91, 235, 1);
    --color-support-success: rgba(0, 155, 72, 1);
    --color-support-info: rgba(5, 186, 241, 1);

    --color-text-secondary: rgba(97, 99, 102, 1);
    --color-icon-secondary: rgba(97, 99, 102, 1);
    --color-border-strong: rgba(216, 217, 219, 1);

    --color-text-error: rgba(227, 27, 87, 1);
    --color-support-error: rgba(227, 27, 87, 1);
    --color-icon-disabled: rgba(193, 194, 196, 1);
    --color-text-disabled: rgba(193, 194, 196, 1);
    --color-icon-primary: rgba(48, 50, 51, 1);

    --text-regular: 400 16px/24px var(--text-font-family);
    --text-label: 600 16px/20px var(--text-font-family);
    --text-h1: 700 20px/24px var(--text-font-family-heading);
    --text-h2: 700 18px/24px var(--text-font-family);
    --text-strong: 700 16px/24px var(--text-font-family);
    --text-caption: 400 14px/18px var(--text-font-family);
    --text-link-small: 400 14px/21px var(--text-font-family);
    --text-link-large: 400 16px/24px var(--text-font-family);
    --button-label: 600 16px/120% var(--text-font-family);

    --color-button-primary: rgba(4, 16, 30, 1);
    --color-button-disabled: rgba(0, 0, 0, 0.1);
    --color-text-inverse-accent: rgba(250, 250, 251, 1);
    --color-notification-error: rgba(255, 228, 232, 1);
    --color-text-on-color-disabled: rgba(169, 171, 173, 1);

    position: absolute;
    width: 100%;
    overflow: auto;
    background-color: var(--color-surface-2);
}

.rtl .file-request-upload-page {
    direction: rtl;
}

.theme-dark .file-request-upload-page {
    --color-surface-1: rgba(48, 50, 51, 1);
    --color-surface-2: rgba(73, 74, 77, 1);
    --color-page-background: rgba(24, 25, 26, 1);
    --color-text-primary: rgba(243, 244, 244, 1);
    --color-link-primary: rgba(105, 163, 251, 1);
    --color-support-success: rgba(9, 191, 91, 1);
    --color-support-info: rgba(0, 150, 201, 1);

    --color-icon-primary: rgba(169, 171, 173, 1);
    --color-icon-secondary: rgba(169, 171, 173, 1);
    --color-text-secondary: rgba(169, 171, 173, 1);
    --color-border-strong: rgba(97, 99, 102, 1);

    --color-text-error: rgba(253, 111, 144, 1);
    --color-support-error: rgba(253, 111, 144, 1);
    --color-icon-disabled: rgba(121, 124, 128, 1);
    --color-text-disabled: rgba(121, 124, 128, 1);

    --color-button-primary: rgba(244, 244, 245, 1);
    --color-button-disabled: rgba(255, 255, 255, 0.1);
    --color-text-inverse-accent: rgba(4, 16, 30, 1);
    --color-notification-error: rgba(137, 18, 64, 1);
    --color-text-on-color-disabled: rgba(145, 147, 151, 1);
}

.file-request-upload-page .page-wrapper {
    height: 100%;
    position: relative;
}

.file-request-upload-page .page-main {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin: 0 auto 84px;
}

.file-request-upload-page .page-main .page-logo {
    margin: 47px auto 79px;
}

.file-request-upload-page .page-main .page-logo i {
    --icon-size: 67px;
}

.file-request-upload-page .page-main .page-content {
    border-radius: 10px;
    background-color: var(--color-page-background);
    padding: 24px;
}

.file-request-upload-page .page-main .page-content .content-title {
    margin-top: 16px;
    margin-bottom: 40px;
    color: var(--color-text-primary);
    font: var(--text-h1);
}

.file-request-upload-page .page-main .page-content .content-details {
    border-radius: 8px;
    padding: 24px;
    background-color: var(--color-surface-1);
    margin-bottom: 20px;
}

.file-request-upload-page .page-main .page-content .content-details .error-icon {
    display: none;
}

.file-request-upload-page .page-main .page-content .content-details .detail-wrapper {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}

.file-request-upload-page .page-main .page-content .content-details .detail-title {
    margin-bottom: 0;
    margin-top: 0;
    color: var(--color-text-primary);
    font: var(--text-h2);
    overflow-wrap: break-word;
    word-break: break-word;
}

.file-request-upload-page .page-main .page-content .content-details .detail-description,
.file-request-upload-page .page-main .page-content .content-details .detail-upload-id {
    margin-bottom: 0;
    margin-top: 0;
    color: var(--color-text-secondary);
    font: var(--text-regular);
    overflow-wrap: break-word;
    word-break: break-word;
}

.file-request-upload-page .page-main .page-content .content-details .detail-upload-id .upload-id {
    user-select: text;
    -webkit-user-select: text;
}

.file-request-upload-page .page-main .page-content .content-details.content-error {
    text-align: center;
    border: 1px solid var(--color-support-error);
    background-color: inherit;
}

.file-request-upload-page .page-main .page-content .content-details.content-error .detail-description,
.file-request-upload-page .page-main .page-content .content-details.content-error .detail-title,
.file-request-upload-page .page-main .page-content .content-details.content-error .detail-upload-id {
    color: var(--color-text-error);
}

.file-request-upload-page .page-main .page-content .content-upload-block {
    border-radius: 8px;
    height: 314px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--color-border-strong);
}

.file-request-upload-page .page-main .page-content .block-empty {
    display: flex;
    justify-content: center;
    border-style: dashed;
    flex-direction: column;
    text-align: center;
}

.file-request-upload-page .page-main .page-content .mobile.block-empty {
    display: none;
}

body.file-request-drag .file-request-upload-page .page-main .page-content .block-empty,
body.file-request-drag .file-request-upload-page .page-main .page-content .block-uploading {
    border-style: solid;
    border-color: var(--color-support-info);
}

.file-request-upload-page .page-main .page-content .block-empty .block-empty-icon.error-icon {
    display: none;
}

.file-request-upload-page .page-main .page-content .block-empty .block-empty-icon i {
    margin: 0 auto;
    --icon-size: 64px;
}

.file-request-upload-page .page-main .page-content .block-empty .block-empty-caption {
    margin-top: 32px;
    font: var(--text-regular);
    color: var(--color-text-secondary);
}

.file-request-upload-page .page-main .page-content .block-empty .block-empty-caption .block-empty-upload-link {
    text-decoration: underline;
    color: var(--color-link-primary);
}

.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-icon:not(.error-icon) {
    display: none;
}

.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-icon.error-icon {
    display: block;
}

.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-icon.error-icon i {
    --mask-color: var(--color-icon-disabled);
}

.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-caption .block-empty-upload-link,
.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-caption {
    color: var(--color-text-disabled);
}

.file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-caption .block-empty-upload-link {
    cursor: default;
}

.file-request-upload-page .page-main .page-content .block-uploading {
    display: flex;
    border-style: solid;
    flex-direction: column;
    padding-inline-end: 2px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-scroll {
    height: 314px;
    overflow-y: scroll;
    padding-inline-start: 11px;
    padding-inline-end: 9px;
    box-sizing: border-box;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-scroll.ps.ps--active-y {
    padding-inline-end: 15px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-scroll .ps__rail-y {
    margin-top: 8px;
    margin-bottom: 8px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details {
    display: flex;
    padding: 16px 16px 14px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item:first-child {
    margin-top: 4px;
}

.file-request-upload-page .page-main .page-content .block-uploading div.block-uploading-item.last-item {
    margin-bottom: 8px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-name,
.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-size,
.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-status {
    font: var(--text-caption);
    letter-spacing: 0.02em;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-name {
    color: var(--color-text-primary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-size {
    width: 70px;
    margin-inline-start: 16px;
    margin-inline-end: 16px;
    color: var(--color-text-secondary);
    flex: 0 0 70px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-status {
    margin-inline-start: auto;
    color: var(--color-text-secondary);
    text-align: right;

    height: initial;
    padding: initial;
    white-space: initial;
    position: initial;
    display: initial;

    width: 75px;
    flex: 0 0 75px;
}

.rtl .file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-details .item-status {
    text-align: left;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error {
    display: none;
    color: var(--color-text-error);
    margin-top: 8px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error span {
    display: inline-block;
    font: var(--text-caption);
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error .error-message {
    margin-inline-start: 8px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error .error-reupload {
    text-decoration: underline;
    color: var(--color-link-primary);
    font: var(--text-link-small);
    margin-inline-start: 3px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error .error-icon i {
    --icon-size: 16px;
    --mask-color: var(--color-text-error);
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-progress {
    border-bottom: 1px solid var(--color-border-strong);
    height: 2px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-progress-bar {
    background-color: var(--color-support-success);
    height: 2px;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item.transfer-error .item-error {
    display: block;
}

.file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item.transfer-error .item-progress-bar {
    background-color: var(--color-support-error);
}

.file-request-upload-page .page-main .page-content .content-upload-summary {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    flex-direction: row-reverse;
}

.file-request-upload-page .page-main .page-content .content-upload-summary .upload-more {
    font: var(--text-label);
    color: var(--color-text-primary);
    display: flex;
    gap: 10px;
}

.file-request-upload-page .page-main .page-content .content-upload-summary .upload-more .add-icon i {
    --icon-size: 22px;
    --mask-color: var(--color-icon-primary);
}

.file-request-upload-page .page-main .page-content .content-upload-summary .upload-more span {
    text-decoration: underline;
    color: var(--color-text-primary);
}

.file-request-upload-page .page-main .page-content .content-upload-summary .upload-info {
    font: var(--text-regular);
    color: var(--color-text-secondary);
}

.file-request-upload-page .page-caption {
    box-sizing: border-box;
    width: 100%;
    position: sticky;
    text-align: center;
    top: calc(100vh - 210px);
}

.file-request-upload-page .page-caption .page-caption-wrapper {
    max-width: 600px;
    margin: 0 auto;
    color: var(--color-text-secondary);
    font: var(--text-regular);
}

.file-request-upload-page .page-caption .page-caption-wrapper p:first-child {
    margin-top: 0;
}

.file-request-upload-page .page-caption .page-caption-wrapper p a {
    text-decoration: underline;
    color: var(--color-link-primary);
    font: var(--text-link-large);
}

.file-request-upload-page .page-footer {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    justify-content: space-between;
    height: 80px;
    background-color: var(--color-page-background);
    font: var(--text-regular);
    padding: 28px 21px;
    position: sticky;
    top: calc(100vh - 82px);
    align-items: center;
}

.file-request-upload-page .page-footer .page-copyright .copyright-wrapper a {
    color: var(--color-text-primary);
}

.file-request-upload-page .page-footer .page-language .language-wrapper {
    display: flex;
    justify-content: center;
}

.file-request-upload-page .page-footer .page-language .language-wrapper .language-icon i {
    --icon-size: 22px;
    --mask-color: var(--color-icon-secondary);
}

.file-request-upload-page .page-footer .page-language .language-wrapper .language-text {
    text-decoration: underline;
    font: var(--text-label);
    padding: 0 12px;
    color: var(--color-text-secondary);
}

@media only screen and (max-width: 768px) {
    .file-request-upload-page .page-main .page-logo {
        margin: 27px auto;
    }

    .file-request-upload-page .page-main .page-logo .icon-mega-logo {
        display: none;
    }

    .file-request-upload-page .page-main .page-logo .icon-mega-logo-mobile {
        background-image: url("../images/mega/icon-mega-logo-light.svg");
        display: block !important;
        height: 32px;
        width: 99px;
    }

    .theme-dark .page-main .page-logo .icon-mega-logo-mobile {
        background-image: url("../images/mega/icon-mega-logo-dark.svg");
    }

    .file-request-upload-page .page-main {
        padding: 0;
        width: inherit;
        margin-bottom: 40px;
    }

    .file-request-upload-page .page-main .page-content {
        border-radius: unset;
        padding-top: 40px;
    }

    .file-request-upload-page .page-main .page-content .content-title {
        margin-bottom: 20px;
    }

    .file-request-upload-page .page-main .page-content .content-details.content-error {
        background-color: var(--color-notification-error);
        padding: 20px 24px;
        border: unset;
        display: flex;
        text-align: left;
    }

    .rtl .file-request-upload-page .page-main .page-content .content-details.content-error {
        text-align: right;
    }

    .file-request-upload-page .page-main .page-content .content-details.content-error .error-icon {
        display: inline;
        color: var(--color-support-error);
        --icon-size: 23px;
    }

    .file-request-upload-page .page-main .page-content .content-details.content-error .detail-wrapper {
        margin-inline-start: 8px;
        row-gap: unset;
    }

    .file-request-upload-page .page-main .page-content .content-details.content-error .detail-title {
        font: var(--text-strong);
    }

    .file-request-upload-page .page-main .page-content .content-details.content-error .detail-title,
    .file-request-upload-page .page-main .page-content .content-details.content-error .detail-description {
        color: var(--color-text-primary);
        margin-bottom: 8px;
    }

    .file-request-upload-page .page-main .page-content .content-upload-block,
    .file-request-upload-page .page-main .page-content .block-uploading .block-uploading-scroll {
        height: 232px;
    }

    .file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item.transfer-error .item-error {
        display: flex;
        align-items: center;
        column-gap: 5px;
    }

    .file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error .error-message-wrapper span {
        display: inline;
    }

    .file-request-upload-page .page-main .page-content .block-uploading .block-uploading-item .item-error .error-message {
        margin-inline-start: 0;
    }

    .file-request-upload-page .page-main .page-content .block-empty {
        display: none;
    }

    .file-request-upload-page .page-main .page-content .mobile.block-empty {
        display: flex;
        border-style: unset;
        height: auto;
    }

    .file-request-upload-page .page-main .page-content .block-empty .block-empty-upload-button {
        background-color: var(--color-button-primary);
        font: var(--button-label);
        color: var(--color-text-inverse-accent);
        border-radius: 8px;
        text-decoration: none;
        padding: 14px 24px;
    }

    .file-request-upload-page .page-main .page-content .block-empty.block-empty-error .block-empty-upload-button {
        background-color: var(--color-button-disabled);
        color: var(--color-text-on-color-disabled);
    }

    .file-request-upload-page .page-main .page-content .content-upload-summary {
        flex-direction: column;
        row-gap: 24px;
        margin-top: 20px;
    }

    .file-request-upload-page .page-caption {
        padding: 0 20px;
        top: calc(100vh - 255px);
    }

    .file-request-upload-page .page-footer {
        height: auto;
        /* justify-content: center;
        text-align: center; */
    }

    .file-request-upload-page .page-footer .page-copyright .copyright-wrapper a span {
        display: block;
    }

    /* .file-request-upload-page .page-footer .page-language {
        display: none;
    } */
}
